<template>
  <section class="input-information">
      <div class="information">
          <div class="title">
            {{currentValue.title}}
          </div>
          <div class="text">
              <input :maxlength="currentValue.maxlength" 
                     v-model="inputValue" 
                     :type="currentValue.type">
          </div>
          <div class="center">
              <span @click="cancel">取消</span>
              <span @click="confirm">确认</span>
          </div>
      </div>
  </section>
</template>
<script>
export default {
  name: "input-information",
  data() {
    return {
        inputValue : '' // 储存进来时候的value值
    };
  },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed:{
      currentValue(){
          this.inputValue = this.value.value
          return this.value
      },
      show(){
          return JSON.stringify(newValue) !== "{}"
      }
  },
  watch: {
      inputValue(value){
          // 可以计算剩余的字数
      }
  },
  methods:{
      close(){
          this.$emit('control')
      },
      cancel(){
          this.close()
      },
      confirm(){
          this.currentValue.value = this.inputValue
          this.close()
      }
  }
};
</script>
<style lang="scss" scoped>
.input-information{
    width: 100%;
    height: calc(100% - 50px);
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 12;
    background-color: rgba(0, 0, 0, .1);
    font-size: 16px;
    .information{
        position: absolute;
        top: 20vh;
        left: 5%;
        width: 90%;
        height: 132px;
        background-color: #fff;
        .title{
            text-align: center;
            margin-top:3vh;
        }
        .text{
            margin-top:3vh;
            width: 90%;
            margin-left: 5%;
            input{
                width: 100%;
                border: 1px solid #ff8d00;
                outline:none;
                padding-left: 3px;
                border-radius: 2px;
            }
        }
        .center{
            width: 90%;
            margin-left: 5%;
            padding-top: 3vh;
            span{
                display: inline-block;
                width: 49%;
                height: 2vh;
                line-height: 2vh;
                text-align: center;
                color: #ff8d00;
            }
        }
    }
}
</style>



